<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
            font-size: 16px;
        }

        .page{
            display: flex;
        }

        select{
            width: 70px;
        }

        ul li{
            display: inline-block;
            width: 20px;
            height: 20px;
            border:1px solid gray;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">

        </div>
        <div class="page">
            <span class="left"> < </span>
            <select class='select'></select>
            <ul class="nav">
                <li>1</li>
                <li>2</li>
            </ul>
            <span class="right"> > </span>
        </div>
    </div>
    <script>
        let data=[];

        for(let i=10;i<20;i++){
            data.push({title:`标题${i+1}`})
        }

        class Page{
            constructor(params){
                this.el=this.getDom(params.el);
                this.lbtn=this.getDom('.left',this.parent)
                this.rbtn=this.getDom('.right',this.parent);
                this.select=this.getDom('.select',this.parent);
                this.nav=this.getDom('.page-nav',this.parent);
                this.con=this.getDom('.content',this.parent);

                this.data=params.data;
                this.pageLength=params.pageLength;
                this.cb1=params.cb1;
                this.cb2=params.cb2;
                this.init();
            }

            init(){
                this.renderselect()
                this.renderNav();
            }

            renderselect(){
                this.select.innerHTML=this.pageLength.map((item)=>{
                    return `<option value=${item}>每页${item}条</option>`
                }).join('')
            }

            getDom(ele,parent){
                return typeof ele==='object'?ele:(parent||document).querySelector(ele)
            }
        }

        let egap=new Page({
            el:".wrap",
            data,
            pageLength:[5,10,15,20],
            cb1:function(){},
            cb2:function(){}
        })
    </script>
</body>
</html>